@charset "utf-8";
@import "../../assets/css/config";
.view-coupon{
	min-height: 12.06rem;
}
.hasCoupon{
	.redpackshadow{
		opacity: 1;
		transform: translateY(0);
	}
	.slogan{
		&__one{
			opacity: 1;
			transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
			transform: translateY(0) scale(0.5);
		}
		&__two{
			opacity: 1;
			transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
			transform: translateY(-1.5rem) scale(0.5);
		}
		&__three{
			opacity: 1;
			transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
			opacity: 0;
		}
		&__text{
			transition: all .8s cubic-bezier(0, 0.93, 0.22, 1) 0.5s;
			transform: translateY(-2.2rem);
			opacity: 1;
		}
	}
	.couponlist{
		&__cell{
			transform: translateY(0);
			opacity: 1;
			&:nth-child(1){
				transition: all 1s cubic-bezier(.19,1,.22,1) 1.2s;
			}
			&:nth-child(2){
				transition: all 1s cubic-bezier(.19,1,.22,1) 1s;
			}
			&:nth-child(3){
				transition: all 1s cubic-bezier(.19,1,.22,1) 0.8s;
			}
		}
	}

	.coupon{
		opacity: 1;
		transform: translateY(0);
		
		&__bg1{
			transform: translateY(0);
		}
		&__bg2{
			transform: translateY(0);
		}
	}
	.text{
		transition: all 1s cubic-bezier(.19,1,.22,1) 0.6s;
		transform: translateY(0);
		opacity: 1;

		&__success{
			transition: all 1s cubic-bezier(.19,1,.22,1);
			opacity: 1;
		}
		&__city{
			transition: all 1s cubic-bezier(.19,1,.22,1);
			opacity: 1;
		}
	}

}
.run{
	.redpackshadow{
		opacity: 1;
		transform: translateY(0);
	}

	.coupon{
		opacity: 1;
		transform: translateY(0);
		&__money{
			opacity: 1;
			transform: translateY(0);
			&__one{
				transform: translateY(-0.2rem) rotateX(10deg) scale(0.9);
			}
			&__two{
				transform: translateY(-0.4rem)  rotateX(10deg) scale(0.8);
			}
		}
	}
	.text{
		opacity: 1;
	}
	.slogan{
		&__one{
			transform: translateY(0);
			opacity: 1;
		}
		&__two{
			transform: translateY(0);
			opacity: 1;
		}
		&__three{
			transform: translateY(0);
			opacity: 1;
		}
	}



	&.success{
		.slogan{
			&__one{
				transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
				transform: translateY(0) scale(0.5);
			}
			&__two{
				transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
				transform: translateY(-1.5rem) scale(0.5);
			}
			&__three{
				transition: all .8s cubic-bezier(0, 0.93, 0.22, 1);
				opacity: 0;
			}
			&__text{
				transition: all .8s cubic-bezier(0, 0.93, 0.22, 1) 0.5s;
				transform: translateY(-2.2rem);
				opacity: 1;
			}
		}

		.coupon{
			&__bg1{
				transform: translateY(0);
			}
			&__bg2{
				transform: translateY(0);
			}
			&__money{
				opacity: 0;
				transform: translateY(100%);
				transition: all 1s cubic-bezier(.19,1,.22,1);
				&__one{
					transition: all 1s cubic-bezier(.19,1,.22,1);
					transform: translateY(0) rotateX(0) scale(1);
				}
				&__two{
					transition: all 1s cubic-bezier(.19,1,.22,1);
					transform: translateY(0)  rotateX(0) scale(1);
				}
			}
		}

		.text{
			transition: all 1s cubic-bezier(.19,1,.22,1);
			transform: translateY(0);
			&__success{
				transition: all 1s cubic-bezier(.19,1,.22,1);
				opacity: 1;
			}
			&__city{
				transition: all 1s cubic-bezier(.19,1,.22,1);
				opacity: 1;
			}
		}

		.couponlist{
			&__cell{
				transform: translateY(0);
				opacity: 1;
			}
		}
	}
}


.redpackshadow{
	@include absWin;
	background: url("../../assets/images/redpack_all.png") 50% 0 no-repeat;
	background-size: cover;
	opacity: 0;
	transform: translateY(-0.5rem);
	transition: all 1s cubic-bezier(.19,1,.22,1);
}

.slogan{
	display: block;
	position: absolute;
	width: 100%;
	margin-top: 0.5rem;
	z-index: 9;
	>div{
		position: absolute;
		overflow: hidden;
	}
	&__one{
		width: 3.8rem;
		height: 3.2rem;
		top: 0;
		left: 50%;
		margin-left: -1.9rem;
		background: url("../../assets/images/30.png") 50% no-repeat;
		background-size: cover;
		transform-origin: 50% 0;
		transform: translateY(-0.3rem);
		transition: all .8s cubic-bezier(0, 0.93, 0.22, 1) 2s;
		opacity: 0;
	}
	&__two{
		width: 3.4rem;
		height: 1.1rem;
		top: 3.1rem;
		left: 50%;
		margin-left: -1.7rem;
		background: url("../../assets/images/slogan_1.png") 50% no-repeat;
		background-size: cover;
		transform-origin: 50% 0;
		transform: translateY(-0.3rem);
		transition: all .8s cubic-bezier(0, 0.93, 0.22, 1) 2.3s;
		opacity: 0;
	}
	&__three{
		width: 4rem;
		height: 1rem;
		top: 4.3rem;
		left: 50%;
		margin-left: -2rem;
		background: url("../../assets/images/slogan_2.png") 50% no-repeat;
		background-size: cover;
		transform: translateY(-0.3rem);
		transition: all .8s cubic-bezier(0, 0.93, 0.22, 1) 2.6s;
		opacity: 0;
	}
	&__text{
		width: 100%;
		line-height: 0.4rem;
		margin-top: 0.2rem;
		text-align: center;
		font-size: 0.3rem;
		color: #fdc748;
		position: absolute;
		top: 4.3rem;
		opacity: 0;
		transition: all 0.8s cubic-bezier(.19,1,.22,1);
	}
}

.coupon{
	position: absolute;
	bottom: 0;
	z-index: 8;
	transition: all 0.8s cubic-bezier(.19,1,.22,1) 0.3s;
	opacity: 0;
	height: 6.0rem;
	transform: translateY(100%);
	width: 100%;
	&__bg1{
		width: 100%;
		height: 5.42rem;
		background: url("../../assets/images/redpack_b.png") 50% 0 no-repeat;
		background-size: cover;
		position: absolute;
		z-index: 2;
		bottom: 0;
		left: 0;
		transition: all 0.6s cubic-bezier(.19,1,.22,1);
		transform: translateY(0.9rem);
	}
	&__bg2{
		width: 100%;
		height: 5.64rem;
		background: url("../../assets/images/redpack_a.png") 50% 0 no-repeat;
		background-size:cover;
		position: absolute;
		z-index: 9;
		bottom: -0.25rem;
		left: 0;
		transition: all 0.6s cubic-bezier(.19,1,.22,1);
		transform: translateY(0.9rem);
	}
	&__money{
		width: 6.2rem;
		height: 3.0rem;
		position: absolute;
		z-index: 3;
		left: 50%;
		margin-left: -3.1rem;
		bottom: 2rem;
		perspective: 600px;
		transition: all 0.8s cubic-bezier(.19,1,.22,1) 1.1s;
		opacity: 0;
		transform: translateY(100%);
		>div{
			width: 6.2rem;
			height: 3.0rem;
			border-radius: 3px;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(100%, #d4bfc0));
			position: absolute;
			top: 0;
			left: 0;
		}
		&__inner{
			color: #f84343;
			z-index: 9;
			h2{
				padding-top: 0.3rem;
				text-align: center;
				font-size: 0.72rem;
				>span{
					font-size: 0.22rem;
				}
			}
			h6{
				text-align: center;
				font-size: 0.24rem;
			}
		}
		&__one{
			z-index: 8;
			opacity: 0.5;
			transform-origin: 50% 0;
			z-index: 2;
			transition: all 0.6s cubic-bezier(.19,1,.22,1) 1.5s;
		}
		&__two{
			z-index: 7;
			opacity: 0.2;
			transform-origin: 50% 0;
			z-index: 1;
			transition: all 0.6s cubic-bezier(.19,1,.22,1) 1.5s;
		}
	}
}


.text{
	position: absolute;
	bottom: 0;
	z-index: 10;
	width: 100%;
	padding: 0.5rem .7rem;
	transform: translateY(.8rem);
	opacity: 0;
	transition: all 1s cubic-bezier(.19,1,.22,1) 1.1s;
	&__success{
		margin-top: 0.6rem;
		text-align: center;
		font-size: 0.24rem;
		color: #fff;
		margin-bottom: 0.3rem;
		line-height: 0.4rem;
		opacity: 0;
	}
	&__button{
		width: 100%;
		height: 1.0rem;
		display: block;
		font-size: 0.3rem;
		font-weight: bold;
		color: #ff4545;
		text-decoration: none;
		text-transform: uppercase;
		text-align: center;
		line-height: 1.0rem;
		margin-left:auto;
		margin-right:auto;
		position:relative;
		background: #ffe98f;
		border-radius: 0.5rem;
		box-shadow: inset 0px 1px 0px #fc9669, 0px 1px 0px 0px #fc9669, 0px 6px 1px #fc9669;

		&:active{
			box-shadow: none;
			color: #ff4545;
			top: 4px;
			filter: opacity(90%);
		}

		&.none{
			pointer-events: none;
			filter: opacity(50%);
		}
	}
	&__city{
		margin-top: 0.35rem;
		font-size: 0.22rem;
		color: #101225;
		opacity: 0;
		p{
			text-align: center;
			letter-spacing: -1px;
			line-height: 0.35rem;
		}
	}
}


.couponlist{
	width: 100%;
	overflow: hidden;
	padding:  0 0.7rem;
	position: relative;
	z-index: 9;
	position: absolute;
	bottom: 4.4rem;
	&__cell{
		background: #fff;
		border-radius: 3px;
		margin-bottom: 0.1rem;
		padding: 0.2rem 0.3rem;
		height: 1.3rem;
		position: relative;
		transform: translateY(0.4rem);
		opacity: 0;
		span{
			position: absolute;
			bottom: 0.3rem;
			right: 0.3rem;
			color: rgba(0, 0, 0, 0.4);
			font-size: 0.24rem;
		}
		h2{
			color: #f84343;
			font-size: 0.45rem;
			line-height: 0.55rem;
			em{
				font-style: normal;
				font-size: 0.24rem;
			}
		}

		&:nth-child(1){
			transition: all 1s cubic-bezier(.19,1,.22,1) 0.4s;
		}
		&:nth-child(2){
			transition: all 1s cubic-bezier(.19,1,.22,1) 0.3s;
		}
		&:nth-child(3){
			transition: all 1s cubic-bezier(.19,1,.22,1) 0.2s;
		}
	}
}